/* stylelint-disable selector-max-type */
/*
 * .vkui класс в режиме full необходим на элементе html,
 * чтобы правильно устанавливалось значение color-scheme,
 * окрашивающее фон html и скроллбар в цвета текущей цветовой
 * схемы.
 * Так как color-scheme зависит от vkui токена, то в
 * full режиме класс токенов vkui также должен
 * быть установлен на html.
 *
 * В SSR есть проблема - чтобы на сервере правильно установить
 * нужный класс, для токенов надо знать предпочитаемую цветовую
 * схему пользователя и передать её через свойство appearance.
 * Если ошибиться со схемой на сервере, то пользователь
 * может получить не ту схему, либо может увидеть как интерфейс моргает
 * из-за переключения со светлой темы на тёмную.
 * Чтобы окончательно избавиться от этой проблемы нужно
 * в vkui-tokens создавать темы, в которые сразу же зашиты обе цветовые схемы.
 * А переключение между темами задавалось бы через медиа выражения
 * с помощью prefers-color-scheme.
 * */
.vkui > body,
.vkui,
.vkui__root {
  color-scheme: var(--vkui--colors_scheme);
}

.vkui {
  /* см. https://github.com/VKCOM/VKUI/pull/7739 */
  background: var(--vkui--color_background);
}

.vkui > body {
  margin: 0;
}

.vkui__root {
  /* чтобы можно было ограничить размеры приложения
   * извне с помощью max-height, max-width */
  max-inline-size: inherit;
  max-block-size: inherit;
}

.vkui__root--embedded {
  background: var(--vkui--color_background);
}

.vkui--layout-card {
  background: var(--vkui--color_background);
}

.vkui--layout-plain {
  background: var(--vkui--color_background_content);
}

/* отключаем нативный pull-to-refresh при взаимодействии с компонентом
 * PullToRefresh или при открывании модалки */
.vkui--disable-overscroll-behavior {
  /* Safari >= 16 */
  overscroll-behavior-y: none;
}

/*
  #sticky_issue #html

  Делаем `<html>` Flexbox'ом и задаем минимальную высоту, чтобы растянуть `<body>` без `block-size: 100%`,
  потому что из-за него элемент с `position: sticky` уходит вверх при скролле большого контента,
  т.к. начинает существовать в `VisualViewport`.

  см. https://stackoverflow.com/questions/30962863/holy-grail-layout-with-flex-and-always-visible-header
*/
.vkui {
  display: flex;
  min-block-size: 100%;
}

/*
  #sticky_issue #body

  1. Исключаем `block-size: 100%`, чтобы растянуть `<body>` на высоту контента.
  2. Делаем его Flexbox'ом, чтобы для внутренних элементов срабатывал `block-size: 100%`,
    в частности у `vkui__root`.
*/
.vkui > body {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
}

/*
  #sticky_issue #<elements>

  Растягиваем все остальные элементы на 100% по каскаду (сейчас так и есть).
*/
.vkui__root {
  inline-size: 100%;
  block-size: 100%;
}
